<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    @import "mate.html"
    <title>纳税提醒</title>
    <link rel="stylesheet" href="../assets/weui/lib/weui.min.css">
    <link rel="stylesheet" href="../assets/weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="../css/style.min.css">

</head>
<body>
<div class="apply-again">
    <div class="flow-header">
        <div class="line-gary"></div>
        <div class="apply-line-blue-one"></div>
        <div class="apply-line-blue-two"></div>
        <div class="weui-flex cert-flow">
            <div class="weui-flex__item flow-done"><!--完成加个flow-done就变蓝色的了-->
                <div class="flow-step apply-flow-step-one">
                    <i></i>
                </div>
                <p class="flow-text">发起申请</p>
            </div>
            <div class="weui-flex__item flow-done">
                <div class="flow-step apply-flow-step-two">
                    <i></i>
                </div>
                <p class="flow-text">等待审核</p>
            </div>
            <div class="weui-flex__item flow-done">
                <div class="flow-step apply-flow-step-three">
                    <i></i>
                </div>
                <p class="flow-text">升级信用</p>
            </div>
        </div>
    </div>

    <div class="weui-cells__title">在线申请复议</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea id="text-content" class="weui-textarea" placeholder="请输入复议内容" rows="3"></textarea>
                <div class="weui-textarea-counter"><span>0</span>/200</div>
            </div>
        </div>
    </div>

    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">图片上传</p>
                        <!--<div class="weui-uploader__info">0/2</div>-->
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">

                            <!--<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                                <div class="weui-uploader__file-content">
                                    <i class="weui-icon-warn"></i>
                                </div>
                            </li>
                            <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                                <div class="weui-uploader__file-content">50%</div>
                            </li>-->
                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="file">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="com-btn">
        <button id="sub-button" type="button" class="weui-btn btn-default">提交</button>
    </div>
</div>

@import "footer.html"
<script src="../assets/layui/layui.js"></script>
<script src='../assets/lrz/lrz.bundle.js'></script>
<script>
    $(function () {
//      超过200字符提示
      $('#text-content').on('change',function () {
        var str=$(this).val();
        if(str.length>200){
          $.alert('请不要输入超过200个字符！');
        }
      });


//    图片上传
      (function () {
        function appendIMG(url,ind) {
          var li='<li class="weui-uploader__file" index="'+ind+'" style="background-image:url('+url+')"></li>';
          $('#uploaderFiles').append(li);
        }
        layui.use('upload', function(){
          var upload = layui.upload;
          var loadIcon=0;

          var uploadInst =upload.render({
            elem: '#uploaderInput',
            auto:false,
//            bindAction: '#sub-button',
//            url: '../test/khgl/sysFiles/uploadFileForEditor2.shtml',
            choose:function (obj) {
              //将每次选择的文件追加到文件队列
              var files = obj.pushFile();
              var imgIndex=0;

              if($('#uploaderFiles').find('li').length+1>3){
                $.alert('上传的图片已经超过3张了！');
                return false;
              }else {
                obj.preview(function(index, file, result){
                  imgIndex=index;
//                console.log(index,file); //得到文件索引，对象，base64编码
                  /*if(file.size>2097152){ //文件大于2M时进行压缩处理,并单独给ajax上传
                    loadIcon=layer.load(1);
                    lrz(file,{width: 500}).then(function (rst) {
//                    console.log(rst);
                      $.ajax({
                        type: 'POST',
                        url: '../test/khgl/sysFiles/uploadFileForEditor2.shtml',
                        data: rst.formData, // LocalResizeIMG 直接封装好的
                        processData: false,
                        contentType: false,
                        success:function (data) {
                          layer.close(loadIcon);
                          appendIMG(rst.base64,imgIndex);//图片预览
                          //业务逻辑
//                          console.log(data);
                        }
                      });
                    });
                  }else {
                    loadIcon=layer.load(1);
                    appendIMG(result,imgIndex);
                    obj.upload(imgIndex, file);//文件小于2M时单文件上传，成功后在下面的done回调里,失败则在下面的error里回调
                  }*/
                  loadIcon=layer.load(1);
                  lrz(file,{width: 500}).then(function (rst) {
//                    console.log(rst);
                    $.ajax({
                      type: 'POST',
                      url: '../test/khgl/sysFiles/uploadFileForEditor2.shtml',
                      data: rst.formData, // LocalResizeIMG 直接封装好的
                      processData: false,
                      contentType: false,
                      success:function (data) {
                        layer.close(loadIcon);
                        appendIMG(rst.base64,imgIndex);//图片预览
                        //业务逻辑
                          console.log(data);
                      },
                      error:function (err) {
                        layer.close(loadIcon);
                        $.alert('上传出现异常！请重试');
                      }
                    });
                  });

                  //给每张图片绑定点击删除的效果
                  $('#uploaderFiles').on('click','li',function () {
                    $.confirm({
                      title: '删除',
                      text: '需要删除此图吗？',
                      onOK: function () {
                        $(this).remove();
                        delete files[$(this).attr('index')];//删除对应文件队列
//                        console.log(files);




                      }.bind(this)
                    });

                  });
                });
              }
            },
            done: function(res){
              //上传完毕回调
//              layer.close(loadIcon);
//              console.log(res);
            },
            error: function(err){
              //请求异常回调
            }
          });

        });
      })();




    });
</script>
</body>
</html>